<template>
  <div class="main">
    <div class="title">
      <h1 v-if="article">{{ article.title }}</h1>
      <h1 v-else>Loading...</h1>
      <div>
        <div class="hdoa">
          <Icon v-if="article" type="ios-time-outline" />
          <span v-if="article">{{ article.creationTime }}</span>

          <Icon v-if="article" type="md-flame" />
          <span v-if="article">{{ article.see }}</span>

          <Icon v-if="variables.commentData.value" type="md-chatboxes" />
          <span v-if="variables.commentData.value">{{
            variables.commentData.value.spare
            }}</span>

          <span v-if="article">
            <Tooltip v-if="article.retransmission" content="转载请保留本文转载地址 著作权归作者所有" theme="light" max-width="180"
              placement="right">© 允许规范转载</Tooltip>
            <Tooltip v-else content="著作权归作者所有" theme="light" max-width="150" placement="right">
              © 禁止转载</Tooltip>
          </span>
        </div>
      </div>

      <!-- 弹幕 -->
      <vue-danmaku ref="danmakuRef" v-model:danmus="danmus" class="barrage" :speeds="100" :debounce="1500"
        :randomChannel="true" :isSuspend="true" useSlot @play-end="playEnd">
        <template v-slot:dm="{ danmu }">
          <div class="dmDiv">
            <span>
              <Avatar :src="danmu.avatarUrl" size="large" />
              &nbsp;
              <a v-html="danmu.content"></a>
            </span>
            <p>{{ danmu.creationTime }}</p>
          </div>
        </template>
      </vue-danmaku>
    </div>

    <!-- 波浪START -->
    <Wave />

    <!-- 文章 -->
    <div class="essay_main">
      <div>
        <div class="essay" id="essayId">
          <MdPreview style="margin-bottom: 150px" editorId="MdPreview_id1" :modelValue="article.content"
            previewTheme="smart-blue" @onGetCatalog="onGetCatalog" />

          <div class="wzdbkp">
            <div class="tx"><img :src="variables.bz_tx.value" /></div>
            <h1>阿杜博客</h1>
            <div class="tb">
              <Button type="info" @click="geArticle(false)">
                <Icon type="ios-arrow-back" size="16" /> 上一篇
              </Button>
              <div class="beg">
                <Beg />
              </div>
              <Button type="success" @click="geArticle(true)">
                下一篇
                <Icon type="ios-arrow-forward" size="16" />
              </Button>
            </div>
          </div>

          <div class="comment">
            <h2>
              <Icon type="ios-chatbubbles" />评论
            </h2>
            <div id="yjplk">
              <Comment type="Article" />
              <Spin fix :show="variables.yjplkZz.value">回复评论中...</Spin>
            </div>
            <CommentList type="Article" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 右侧栏 -->
  <Affix :offset-top="80" class="rightDiv">
    <div class="catalogue" v-if="wzml">
      <!-- <div class="catalogue_title"><Icon type="logo-buffer" />文章目录</div> -->
      <div class="catalogue_main">
        <MdCatalog editorId="MdPreview_id1" :scrollElement="scrollElement" />
      </div>
    </div>

    <UserMap :width="160" />
  </Affix>

  <!-- 阅读模式 -->
  <Affix :offset-top="80" class="zqy">
    <Tooltip content="阅读模式" placement="left">
      <button class="yxandt" @click="ydmsModel = !ydmsModel" style="padding: 20px 22px">
        <Icon type="md-book" :size="18" />
      </button>
    </Tooltip>
  </Affix>

  <Drawer v-model="ydmsModel" width="100" height="100" :styles="{ 'background-color': '#E0D8C8' }" placement="top">
    <template #close>
      <Button shape="circle" icon="md-close" size="large" style="
          font-size: 32px;
          width: 50px;
          height: 50px;
          background-color: rgba(97, 97, 97, 0.5);
          color: #fff;
          margin-right: 50px;
        " @click="ydmsModel = !ydmsModel"></Button>
    </template>

    <MdPreview id="wzCtid" style="margin-bottom: 150px" :modelValue="article.content" previewTheme="smart-blue" />
  </Drawer>

  <BackTop />
</template>

<script setup>
  import { MdPreview, MdCatalog } from "md-editor-v3";
  import "md-editor-v3/lib/style.css";
  const scrollElement = document.documentElement;
  import vueDanmaku from "vue3-danmaku";
  import { Notice, Spin } from "view-ui-plus";
  import Comment from "./Comment.vue";
  import CommentList from "./CommentList.vue";
  import variables from "../../js/variable";
  const BackTop = defineAsyncComponent(() => import("./BackTop.vue"));
  const Wave = defineAsyncComponent(() => import("./Wave.vue"));
  const UserMap = defineAsyncComponent(() => import("./UserMap.vue"));
  const Beg = defineAsyncComponent(() => import("./Beg.vue"));

  const axios = inject("axios");
  const router = useRouter();
  const route = useRoute();

  const ydmsModel = ref(false); //阅读抽屉

  const article = ref("");
  let interval = null; // 定义定时器变量
  onMounted(() => {
    findArticle();
    updSee();
  });

  // 在组件销毁时清除定时器
  onBeforeUnmount(() => {
    clearInterval(interval);
  });

  // 查询文章详情
  function findArticle () {
    axios
      .post("article/findArticle", { id: route.params.id })
      .then((response) => {
        let res = response.data;
        if (res.msg == "成功" && res.data.total > 0) {
          article.value = res.data.records[0];
          //修改页面标题
          document.title = res.data.records[0].title + " - 阿杜博客";

          //查询文章评论
          getTreeHole();
        }
      })
      .catch();
  }

  let wzml = ref(false); //文章目录是否显示
  //获取文章目录
  const onGetCatalog = (list) => {
    if (list.length > 0) {
      wzml.value = true;
    } else {
      wzml.value = false;
    }
  };

  const danmus = ref([]); //弹幕数据
  const danmakuRef = ref(null);
  //查询评论
  const getTreeHole = () => {
    axios
      .post("comment/findComment", {
        targetId: route.params.id,
        classify: 1,
        pageSize: 100,
      })
      .then((response) => {
        let res = response.data;

        if (res.msg == "成功") {
          if (
            res.data &&
            res.data.records.length > 0 &&
            Array.isArray(res.data.records)
          ) {
            res.data.records.forEach((item) => {
              danmakuRef.value.add(item);
            });
          }
        }
      })
      .catch();
  };

  //弹幕播放结束，重新查询
  const playEnd = () => {
    getTreeHole();
  };

  //文章查看+1
  function updSee () {
    axios.post("article/updArticleSee", { id: route.params.id }).then().catch();
  }

  //查询上一篇或下一篇文章
  function geArticle (next) {
    axios
      .post("article/findArticleByNext", { id: route.params.id, next: next })
      .then((response) => {
        let res = response.data;
        if (res.msg == "成功") {
          if (res.data) {
            router.push({ name: "Article", params: { id: res.data } });
            setTimeout(() => {
              location.reload();
            }, 0);
          } else {
            Notice.warning({
              title: "没有啦~",
            });
          }
        }
      })
      .catch();
  }
</script>

<style scoped>
  .main {
    backdrop-filter: blur(80px);
  }

  .defaultFont {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .zqy {
    position: absolute;
    top: 550px;
    left: 200px;
    display: flex;
    flex-direction: column;
  }

  #wzCtid {
    width: 70%;
    margin: 50px auto;
    padding: 50px;
    background-color: #f8f1e2;
    box-shadow: 0 6px 12px 3px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }

  /* ----按钮样式--- */
  .yxandt {
    z-index: 1;
    color: #000;
    padding: 20px 26px;
    outline: none;
    border: none;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid rgb(218, 218, 218);
    box-shadow: 0 2px 4px #3232320a;
    cursor: pointer;
    font-size: 16px;
    /* margin-bottom: 10px; */
  }

  .yxandt:hover {
    cursor: pointer;
    animation: jelly 0.5s;
  }

  @keyframes jelly {

    0%,
    100% {
      transform: scale(1, 1);
    }

    25% {
      transform: scale(0.9, 1.1);
    }

    50% {
      transform: scale(1.1, 0.9);
    }

    75% {
      transform: scale(0.95, 1.05);
    }
  }

  /* ----按钮样式end--- */

  .title {
    padding-top: 70px;
    height: 400px;
    padding-left: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

  .title>h1 {
    color: #f5f5f5;
    font-size: 50px;
  }

  .hdoa {
    color: #d6d6d6;
    user-select: none;
    font-size: 15px;
  }

  .hdoa>span {
    padding: 0 20px 0 4px;
  }

  .essay_main {
    background-color: #f7f9fe;
    display: flex;
    justify-content: center;
  }

  .essay_main>div {
    width: 70%;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
  }

  article {
    margin-bottom: 200px;
  }

  .essay {
    width: 74%;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
  }

  .wzdbkp {
    border: 1px solid rgb(230, 230, 230);
    background-color: #f7f7f9;
    border-radius: 10px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    width: 100%;
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    user-select: none;
  }

  .tx {
    border: 1px solid rgb(230, 230, 230);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    overflow: hidden;
  }

  .tx img {
    width: 70px;
    border-radius: 50%;
    height: 70px;
    transition: 0.3s;
  }

  .tx:hover img {
    transform: scale(0.8);
  }

  .tx:before {
    animation: searchLights-1e3e0c73 2s ease-in 2s infinite;
    background-image: linear-gradient(180deg,
        transparent,
        hsla(0, 0%, 100%, 0.5),
        transparent);
    content: "";
    height: 20px;
    position: absolute;
    transform: rotate(-45deg);
    width: 1000px;
  }

  @keyframes searchLights-1e3e0c73 {
    0% {
      left: -200px;
      top: -300px;
    }

    to {
      left: -160px;
      top: 800px;
    }
  }

  .wzdbkp h1 {
    padding: 30px 0 0;
    letter-spacing: 1px;
  }

  .tb {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tb div {
    padding: 5px 10px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
  }

  /* -----------评论START-------------- */
  .comment>h2 {
    padding: 70px 0 20px;
  }

  #yjplk {
    position: relative;
  }

  /* -----------评论END-------------- */

  .option1 {
    opacity: 1;
  }

  .option0 {
    opacity: 0;
  }

  .rightDiv {
    width: 300px;
    border-radius: 10px;
    position: absolute;
    right: 300px;
    top: 550px;
  }

  .catalogue {
    min-height: 200px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    margin-bottom: 50px;
    border-radius: 5px;
  }

  .catalogue_title {
    font-size: 20px;
  }

  .catalogue_main p {
    padding: 10px 0 10px 10px;
    cursor: pointer;
    font-size: 16px;
  }

  .catalogue_main p:hover {
    color: #40c08f;
  }

  .catalogue_main_xz {
    color: #40c08f;
    font-size: 18px !important;
  }

  .catalogue_main_xz::before {
    content: "";
    border: 2px solid #40c08f;
    margin-right: 15px;
    margin-left: -15px;
  }

  /* 弹幕 */

  .barrage {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 100px;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    color: #ffffff;
    z-index: 999999;
  }

  .dmDiv {
    user-select: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }

  .dmDiv p {
    font-size: 12px;
    opacity: 0;
    margin-left: 40px;
  }

  .dmDiv:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .dmDiv:hover p {
    opacity: 1;
  }

  /* 弹幕end */

  @media (max-width: 1800px) {
    .rightDiv {
      display: none !important;
    }

    .essay {
      width: 95%;
      margin: 0 auto;
    }

    .beg {
      display: none;
    }

    .zqy {
      display: none;
    }

    .title>h1 {
      font-size: 30px;
    }
  }

  @media (max-width: 800px) {
    .title>h1 {
      font-size: 20px;
    }

    .essay {
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .essay_main>div {
      width: 100%;
    }
  }
</style>